<template>
  <div class="leave-bill">

    <div class="content-box1">
      <span>姓名：{{name}}</span>
      <span>身份证号码：{{certNo}}</span>
      <span>银行卡号：{{cardNo}}</span>
      <span>银行名称：{{bankName}}</span>
    </div>

    <div class="content-box2">
      <div class="choose-box">
        <span class="title">企业名称：</span>
        <span class="name" @click="openCompany" v-text="company" :class="{'company-text':company != '请选择企业'}"></span>
        <img src="../in.png" class="pic1" onclick="return false"/>
      </div>

      <div class="choose-box">
        <span class="title">离职日期：</span>
        <datetime format="YYYY-MM-DD" v-model="workEndTime" class="name" :end-date="date"
                  placeholder="请选择离职日期"></datetime>
        <img src="../in.png" class="pic1" onclick="return false"/>
      </div>

      <div class="choose-box">
        <span class="title">离职方式：</span>
        <popup-picker :data="leaveTypeList" v-model="leaveType" class="name" placeholder="请选择离职方式"
                      @on-change="selectLeave"></popup-picker>
        <img src="../in.png" class="pic1" onclick="return false"/>
      </div>
      <div class="choose-box">
        <span class="title">员工来源：</span>
        <popup-picker :data="empOriginList" v-model="empOrigin" class="name" placeholder="请选择员工来源"
                      @on-change="selectOrigin"></popup-picker>
        <img src="../in.png" class="pic1" onclick="return false"/>
      </div>
    </div>

    <div class="content-box3">
      <span class="title1">本月工时1：</span>
      <div class="num-box">
        <input type="text" class="number" placeholder="0" v-model="currentWorkHours" maxlength="10"
               oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
      </div>
      <span class="title2">小时</span>
    </div>
    <div class="content-box3">
      <span class="title1">工价1：</span>
      <div class="num-box">
        <input type="text" class="number" placeholder="0.00" v-model="currentWorkPrice" maxlength="10"
               oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
      </div>
      <span class="title2">元/小时</span>
    </div>

    <div class="content-box3">
      <span class="title1">本月工时2：</span>
      <div class="num-box">
        <input type="text" class="number" placeholder="0" v-model="currentWorkHours2" maxlength="10"
               oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
      </div>
      <span class="title2">小时</span>
    </div>
    <div class="content-box3">
      <span class="title1">工价2：</span>
      <div class="num-box">
        <input type="text" class="number" placeholder="0.00" v-model="currentWorkPrice2" maxlength="10"
               oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
      </div>
      <span class="title2">元/小时</span>
    </div>


    <div class="pre-month" v-show="showPostHour">
      <div class="content-box3">
        <span class="title1">上月工时1：</span>
        <div class="num-box">
          <input type="text" class="number" placeholder="0" v-model="lastWorkHours" maxlength="10"
                 oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
        </div>
        <span class="title2">小时</span>
      </div>
      <div class="content-box3">
        <span class="title1">工价1：</span>
        <div class="num-box">
          <input type="text" class="number" placeholder="0.00" v-model="lastWorkPrice" maxlength="10"
                 oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
        </div>
        <span class="title2">元/小时</span>
      </div>

      <div class="content-box3">
        <span class="title1">上月工时2：</span>
        <div class="num-box">
          <input type="text" class="number" placeholder="0" v-model="lastWorkHours2" maxlength="10"
                 oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
        </div>
        <span class="title2">小时</span>
      </div>
      <div class="content-box3">
        <span class="title1">工价2：</span>
        <div class="num-box">
          <input type="text" class="number" placeholder="0.00" v-model="lastWorkPrice2" maxlength="10"
                 oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
        </div>
        <span class="title2">元/小时</span>
      </div>
    </div>
    <div class="content-box4" @click="openHour">
      <img src="./add.png" class="pic2" v-if="!showPostHour" onclick="return false"/>
      <span class="add">{{showPostHour?"删除上月工时信息":"添加上月工时信息"}}</span>
    </div>

    <div class="lend-money">
      <span class="money-title">蓝聘线上借支：</span>
      <div class="money-box">
        <input type="text" class="money" v-model="onlineLendMoney" readonly/>
      </div>
    </div>
    <!--其他扣款-->
    <div class="other-box">
      <div class="lend-money" v-for="(item,index) in withholdList" :key="index"
           @click="editOther(item.withhold,item.withholdMoney,index)">
        <span class="money-title">{{item.withhold}}：</span>
        <span class="other-money">-{{item.withholdMoney}}元</span>
        <img src="../in.png" class="pic1" onclick="return false"/>
      </div>
    </div>

    <div class="content-box4" @click="withHold">
      <img src="./add.png" class="pic2" onclick="return false"/>
      <span class="add">添加扣款记录</span>
    </div>

    <!--补贴记录-->
    <div class="other-box">
      <div class="lend-money" v-for="(item,index) in subsidyList" :key="index"
           @click="editSubsidy(item.subsidy,item.subsidyMoney,index)">
        <span class="money-title">{{item.subsidy}}：</span>
        <span class="other-money">+{{item.subsidyMoney}}元</span>
        <img src="../in.png" class="pic1" onclick="return false"/>
      </div>
    </div>

    <div class="content-box4" @click="subsidy">
      <img src="./add.png" class="pic2" onclick="return false"/>
      <span class="add">添加补贴记录</span>
    </div>

    <div class="source-box">
      <span class="source-title">人力来源：</span>
      <div class="source-con">
        <input type="text" class="source" placeholder="请输入人力来源" v-model="userSource" maxlength="10"/>
      </div>
    </div>

    <div class="grant-box">
      <span class="title">发放方式：</span>
      <popup-picker :data="grantTypeList" v-model="grantType" class="name" placeholder="请选择发放方式"
                    @on-change="selectGrant"></popup-picker>
      <img src="../in.png" class="pic1" onclick="return false"/>
    </div>

    <div class="proxy-box" v-show="provideType == 2">
      <div class="source-box">
        <span class="source-title">代理姓名：</span>
        <div class="source-con">
          <input type="text" class="source" placeholder="请输入代理姓名" v-model="agencyName" maxlength="5"/>
        </div>
      </div>
      <div class="source-box">
        <span class="source-title">代理身份证号：</span>
        <div class="source-con">
          <input type="text" class="source" placeholder="请输入代理身份证号" v-model="agencyCardNumber" maxlength="18"/>
        </div>
      </div>
      <div class="source-box">
        <span class="source-title">代理银行卡号：</span>
        <div class="source-con">
          <input type="text" class="source" placeholder="请输入代理银行卡号" v-model="agencyBankNum" maxlength="19"/>
        </div>
      </div>
      <div class="source-box">
        <span class="source-title">代理银行名称：</span>
        <div class="source-con">
          <input type="text" class="source" placeholder="请输入代理银行名称" v-model="agencyBankName" maxlength="11"/>
        </div>
      </div>
      <div class="source-box">
        <span class="source-title">代理银行卡归属地：</span>
        <div class="source-con">
          <x-address :title="title" v-model="agencyBankAddress" :list="addressData" placeholder="请选择代理银行卡归属地"
                     id="belongAddr" class="source" @on-hide="selectArea" ref="picker"></x-address>
        </div>
      </div>
    </div>


    <div class="btn-box">
      <button type="button" class="btn" @click="preview">预览</button>
    </div>

    <!--企业列表-->
    <div class="open-box" v-show="showCompany" @click="closeCompany">
      <div class="open-list">
        <div class="name" v-for="(item,index) in companyList" :key="index"
             @click="selectCompany(item.id,item.mechanismName)">{{item.mechanismName}}
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {Datetime, PopupPicker} from 'vux'
  import {formatDate, getSessionStore, setSessionStore, toDecimal} from "../../../config/util"
  import {baseUrl} from "../../../config/env"
  import {XAddress, ChinaAddressV4Data} from 'vux'

  export default {
    data() {
      return {
        date: "",
        company: "请选择企业",
        workEndTime: getSessionStore('leaveEndTime'),//离职时间
        leaveType: [],
        leaveTypeList: [["合同到期", "辞退/开除", "辞工"]],
        empOrigin: [],
        empOriginList: [["大和", "蓝聘", "上势", "大赢和"]],
        grantType: [],
        grantTypeList: [["转员工", "转代理"]],
        showPostHour: false,
        showCompany: false,
        companyList: [],
        withholdList: [],
        subsidyList: [],
        userId: "",
        name: "",
        certNo: "",
        cardNo: "",
        bankName: "",
        workEndTypeName: "",
        workEndType: "",  //离职类型 1合同到期,2辞退、开除,3辞工
        originType: "",
        originTypeName: "",
        onlineLendMoney: "",//蓝聘线上借支
        currentWorkHours: "",//本月工时1
        currentWorkPrice: "",//本月工价1
        currentWorkHours2: "",//本月工时2
        currentWorkPrice2: "",//本月工价2
        lastWorkHours: "",
        lastWorkPrice: "",
        lastWorkHours2: "",
        lastWorkPrice2: "",
        userSource: "",//人力来源
        provideTypeName: "",
        provideType: "",//工资发放方式 1转员工 2转代理
        agencyName: "",//代理姓名
        agencyCardNumber: "",//代理身份证号码
        agencyBankNum: "",//代理银行卡号
        agencyBankName: "",//代理银行卡名称,
        mechanismId: "",
        deductContent: "",//扣款项目,
        lendMoney: "",
        title: "",
        agencyBankAddress: [],//代理银行卡归属地
        addressData: ChinaAddressV4Data,
        address: "",
        originUserTemp: '',
      }
    },
    mounted() {
      this.withholdList = JSON.parse(sessionStorage.getItem("withholdList"));
      this.subsidyList = JSON.parse(sessionStorage.getItem("subsidyList"));
      this.userId = this.$route.query.userId;
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryUserInfo();
    },
    methods: {
      getInitLeave() {
        if (getSessionStore("leave")) {
          let leave = JSON.parse(getSessionStore("leave"));
          this.mechanismId = leave.mechanismId;
          this.company = leave.company;
          if (leave.workEndTypeName) {
            this.leaveType.push(leave.workEndTypeName);
          }
          if(leave.originTypeName){
            this.empOrigin.push(leave.originTypeName);
          }else{
            if(this.originUserTemp){
              this.empOrigin.push(this.originUserTemp);
            }
          }
          if (leave.workHours) {
            this.currentWorkHours = toDecimal(leave.workHours);
          }
          if (leave.workHours2) {
            this.currentWorkHours2 = toDecimal(leave.workHours2);
          }
          if (leave.workPrice) {
            this.currentWorkPrice = toDecimal(leave.workPrice);
          }
          if (leave.workPrice2) {
            this.currentWorkPrice2 = toDecimal(leave.workPrice2);
          }
          if (leave.preWorkHours) {
            this.lastWorkHours = toDecimal(leave.preWorkHours);
          }
          if (leave.preWorkPrice) {
            this.lastWorkPrice = toDecimal(leave.preWorkPrice);
          }
          if (leave.preWorkHours2) {
            this.lastWorkHours2 = toDecimal(leave.preWorkHours2);
          }
          if (leave.preWorkPrice2) {
            this.lastWorkPrice2 = toDecimal(leave.preWorkPrice2);
          }
          this.userSource = leave.userSource;
          if (leave.provideTypeName) {
            this.grantType.push(leave.provideTypeName);
          }
          this.agencyName = leave.agencyName;
          this.agencyCardNumber = leave.agencyCardNumber;
          this.agencyBankNum = leave.agencyBankNum;
          this.agencyBankName = leave.agencyBankName;
          if (leave.agencyBankAddress) {
            leave.agencyBankAddress.forEach((value) => {
              this.agencyBankAddress.push(value);
            });
          }
          this.showPostHour = leave.showPostHour;
        }else{
          if(this.originUserTemp){
            this.empOrigin.push(this.originUserTemp);
          }
        }
      },
      queryUserInfo() {
        this.$vux.loading.show({//查询实名信息以及借支金额
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_resign_record?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);


        this.axios.post(baseUrl + "/resident/get_resign_record?sgin=" + this.userSign + "&userId=" + this.userId + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.name = resultObj.data.userName;
            this.certNo = resultObj.data.userCardNumber;
            this.cardNo = this.$decruption(resultObj.data.bankNumber);
            this.bankName = resultObj.data.bankName;
            this.lendMoney = resultObj.data.onlineLendMoney;

            if ("DH" == resultObj.data.userOrigin) {
              this.originUserTemp = "大和";
            } else if ("LP" == resultObj.data.userOrigin) {
              this.originUserTemp = "蓝聘";
              this.originType = "LP";
            } else if ("SS" == resultObj.data.userOrigin) {
              this.originUserTemp = "上势";
            } else if ("DYH" == resultObj.data.userOrigin) {
              this.originUserTemp = "大赢和";
            }

            if (resultObj.data.onlineLendMoney != null && resultObj.data.onlineLendMoney != '') {
              this.onlineLendMoney = `-${toDecimal(resultObj.data.onlineLendMoney)}元`;
            }
            this.getInitLeave();
            this.queryMechanism();
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      withHold() {//添加扣款
        this.initLeave();
        this.$router.push({path: "/withHold", query: {"type": 1, "userId": this.userId}});
      },
      subsidy() {//添加补贴
        this.initLeave();
        this.$router.push({path: "/subsidy", query: {"type": 1, "userId": this.userId}});
      },
      preview() {//预览
        if (this.checkLeave()) {
          this.initLeave();
          this.$router.push({
            path: "/previewbill", query: {
              "certNo": this.certNo,
              "cardNo": this.cardNo,
              "bankName": this.bankName,
              "workEndTime": this.workEndTime,//离职时间
              "workEndType": this.workEndType,//离职类型  1合同到期  2 辞退、开除  3 辞工
              "originType":this.originType,//员工来源
              "currentWorkHours": this.currentWorkHours,//本月工时1（小时）
              "currentWorkPrice": this.currentWorkPrice,// 本月工价1（元/小时）
              "currentWorkHours2": this.currentWorkHours2,//本月工时2（小时）
              "currentWorkPrice2": this.currentWorkPrice2,// 本月工价2（元/小时）
              "lastWorkHours": this.lastWorkHours,//上月工时1（小时）
              "lastWorkPrice": this.lastWorkPrice,//上月工价1（元/小时）
              "lastWorkHours2": this.lastWorkHours2,//上月工时2（小时）
              "lastWorkPrice2": this.lastWorkPrice2,//上月工价2（元/小时）
              "onlineLendMoney": this.lendMoney,//蓝聘线上借支
              "userSource": this.userSource,//人力来源
              "provideType": this.provideType,//工资发放方式 1转员工 2转代理
              "agencyName": this.agencyName,//代理姓名
              "agencyCardNumber": this.agencyCardNumber,//代理身份证号码
              "agencyBankNum": this.agencyBankNum,//代理银行卡号
              "agencyBankName": this.agencyBankName,//代理银行名称
              "agencyBankAddress": this.address,//代理银行卡归属地
              "company": this.company,
              "userId": this.userId,
              "mechanismId": this.mechanismId,
              "name": this.name
            }
          });
        }
      },
      openHour() {//添加上月工时
        if (this.showPostHour) {
          this.lastWorkHours = "";
          this.lastWorkPrice = "";
          this.lastWorkHours2 = "";
          this.lastWorkPrice2 = "";
          this.showPostHour = false;
        } else {
          this.showPostHour = true;
        }
      },
      openCompany() {//打开企业选择框
        this.showCompany = true;
      },
      closeCompany() {
        this.showCompany = false;
      },
      editOther(title, money, index) {//修改/删除扣款记录
        this.initLeave();
        this.$router.push({
          path: "/withhold",
          query: {"withhold": title, "money": money, "type": 2, "index": index, "userId": this.userId}
        });
      },
      editSubsidy(title, money, index) {//修改/删除补贴记录
        this.initLeave();
        this.$router.push({
          path: "/subsidy",
          query: {"subsidy": title, "money": money, "type": 2, "index": index, "userId": this.userId}
        });
      },
      initLeave() {//临时存储离职单数据
        let obj = {};
        obj.company = this.company;
        obj.mechanismId = this.mechanismId;
        if (this.workEndTypeName) {
          obj.workEndTypeName = this.workEndTypeName;
        }
        if (this.originTypeName) {
          obj.originTypeName = this.originTypeName;
        }
        obj.workHours = this.currentWorkHours;
        obj.workPrice = this.currentWorkPrice;
        obj.workHours2 = this.currentWorkHours2;
        obj.workPrice2 = this.currentWorkPrice2;
        obj.preWorkHours = this.lastWorkHours;
        obj.preWorkPrice = this.lastWorkPrice;
        obj.preWorkHours2 = this.lastWorkHours2;
        obj.preWorkPrice2 = this.lastWorkPrice2;
        obj.userSource = this.userSource;
        obj.provideTypeName = this.provideTypeName;
        obj.agencyName = this.agencyName;
        obj.agencyCardNumber = this.agencyCardNumber;
        obj.agencyBankNum = this.agencyBankNum;
        obj.agencyBankName = this.agencyBankName;
        obj.agencyBankAddress = this.agencyBankAddress;
        obj.showPostHour = this.showPostHour;
        if (this.workEndTime) {
          setSessionStore("leaveEndTime", this.workEndTime);
        }
        setSessionStore("leave", obj);
      },
      selectGrant(value) {//发放方式
        this.provideTypeName = String(value);
        if ("转代理" == String(value)) {
          this.provideType = 2;
        } else {
          this.provideType = 1;
        }
      },
      selectLeave(value) {//离职方式
        this.workEndTypeName = String(value);
        if ("合同到期" == String(value)) {
          this.workEndType = 1;
        } else if ("辞工" == String(value)) {
          this.workEndType = 3;
        } else {
          this.workEndType = 2;
        }
      },
      selectOrigin(value) {//员工来源
        this.originTypeName = String(value);
        if ("大和" == String(value)) {
          this.originType = "DH";
        } else if ("蓝聘" == String(value)) {
          this.originType = "LP";
        } else if ("上势" == String(value)) {
          this.originType = "SS";
        } else {
          this.originType = "DYH";
        }
      },
      selectArea(type, value) {//选择银行卡归属地
        if (type) {
          let array = value.split(" ");
          if (array[0] == array[1]) {
            this.agencyBankAddress.pop();
          }
        }
      },
      queryMechanism() {//查询获取企业列表
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_teacher_mechanism?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_teacher_mechanism?sgin=" + this.userSign + "&type=1" + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.companyList = resultObj.data;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        })
      },
      selectCompany(id, name) {//选择所在企业
        this.showCompany = false;
        this.company = name;
        this.mechanismId = id;
      },
      checkLeave() {//校验数据
        let value = this.company == "请选择企业" ? "" : this.company;
        if (value == "" || value == null || value == undefined) {
          this.$vux.toast.text("请选择企业", "middle");
          return;
        }
        if (this.workEndTime == "" || this.workEndTime == null || this.workEndTime == undefined) {
          this.$vux.toast.text("请选择离职日期", "middle");
          return;
        }
        if (this.workEndType == "" || this.workEndType == null || this.workEndType == undefined) {
          this.$vux.toast.text("请选择离职方式", "middle");
          return;
        }
        if (this.originType == "" || this.originType == null || this.originType == undefined) {
          this.$vux.toast.text("请选择员工来源", "middle");
          return;
        }
        if (this.currentWorkHours == "" || this.currentWorkHours == null || this.currentWorkHours == undefined) {
          this.$vux.toast.text("请输入本月工时1", "middle");
          return;
        }
        if (this.currentWorkPrice == "" || this.currentWorkPrice == null || this.currentWorkPrice == undefined) {
          this.$vux.toast.text("请输入本月工价1", "middle");
          return;
        }

        if (this.currentWorkPrice2 != "" && this.currentWorkPrice2 != undefined && this.currentWorkPrice2) {
          if (this.currentWorkHours2 == "" || this.currentWorkHours2 == null || this.currentWorkHours2 == undefined) {
            this.$vux.toast.text("请输入本月工时2", "middle");
            return;
          }
        }
        if (this.currentWorkHours2 != "" && this.currentWorkHours2 != undefined && this.currentWorkHours2) {
          if (this.currentWorkPrice2 == "" || this.currentWorkPrice2 == null || this.currentWorkPrice2 == undefined) {
            this.$vux.toast.text("请输入本月工价2", "middle");
            return;
          }
        }

        if (this.showPostHour) {
          if (this.lastWorkHours == "" || this.lastWorkHours == null || this.lastWorkHours == undefined) {
            this.$vux.toast.text("请输入上月工时1", "middle");
            return;
          }
          if (this.lastWorkPrice == "" || this.lastWorkPrice == null || this.lastWorkPrice == undefined) {
            this.$vux.toast.text("请输入上月工价1", "middle");
            return;
          }


          if (this.lastWorkPrice2 != "" && this.lastWorkPrice2 != undefined && this.lastWorkPrice2) {
            if (this.lastWorkHours2 == "" || this.lastWorkHours2 == null || this.lastWorkHours2 == undefined) {
              this.$vux.toast.text("请输入上月工时2", "middle");
              return;
            }
          }
          if (this.lastWorkHours2 != "" && this.lastWorkHours2 != undefined && this.lastWorkHours2) {
            if (this.lastWorkPrice2 == "" || this.lastWorkPrice2 == null || this.lastWorkPrice2 == undefined) {
              this.$vux.toast.text("请输入上月工价2", "middle");
              return;
            }
          }
        }
        if (this.userSource == "" || this.userSource == null || this.userSource == undefined) {
          this.$vux.toast.text("请输入人力来源", "middle");
          return;
        }
        if (this.provideType == "" || this.provideType == null || this.provideType == undefined) {
          this.$vux.toast.text("请选择发放方式", "middle");
          return;
        } else if (this.provideType == 2) {//校验转代理
          let reg1 = /^[\u2E80-\u9FFF]+$/;
          if (this.agencyName == "" || this.agencyName == null || this.agencyName == undefined) {
            this.$vux.toast.text("请输入代理姓名", "middle");
            return;
          } else if (!reg1.test(this.agencyName)) {
            this.$vux.toast.text("请输入代理中文姓名", "middle");
            return;
          }
          let reg2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9X])$/;
          if (this.agencyCardNumber == "" || this.agencyCardNumber == null || this.agencyCardNumber == undefined) {
            this.$vux.toast.text("请输入代理身份证号", "middle");
            return;
          } else if (!reg2.test(this.agencyCardNumber)) {
            this.$vux.toast.text("请输入正确的身份证号，最后一位是字母时要大写", "middle");
            return;
          }
          let reg = /^(\d{16}|\d{17}|\d{18}|\d{19})$/; //银行卡号
          if (this.agencyBankNum == "" || this.agencyBankNum == null || this.agencyBankNum == undefined) {
            this.$vux.toast.text("请输入代理银行卡号", "middle");
            return;
          } else if (!reg.test(this.agencyBankNum)) {
            this.$vux.toast.text("请输入正确的代理银行卡号", "middle");
            return;
          }
          if (this.agencyBankName == "" || this.agencyBankName == null || this.agencyBankName == undefined) {
            this.$vux.toast.text("请输入代理银行名称", "middle");
            return;
          }
          let address = document.getElementById("belongAddr").innerText.substring(0, 9);
          let area = address == "请选择银行卡归属地" ? "" : document.getElementById("belongAddr").innerText;
          if (area == "" || area == null) {
            this.$vux.toast.text("请选择银行卡归属地", "middle");
            return;
          } else {
            let array = area.split(" ");
            if (array.length == 1) {
              this.address = array[0];
            } else {
              this.address = area.replace(/\s*/g, "");
            }
          }
        }
        return true;
      }
    },
    components: {
      Datetime,
      PopupPicker,
      XAddress
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .leave-bill
    wh(100%, auto)
    background: rgba(242, 242, 242, 1)
    .content-box1
      display: flex
      flex-direction: column
      justify-content: center
      wh(100%, 3.813rem)
      background: rgba(255, 255, 255, 1)
      margin-bottom: 0.267rem
      span
        margin-left: 0.32rem
        padding-top: 0.2rem
        padding-bottom: 0.2rem
        size-color(0.427rem, rgba(153, 153, 153, 1))
        &:nth-child(1)
          font-weight: 500
          size-color(0.453rem, rgba(51, 51, 51, 1))
    .content-box2
      wh(100%, auto)
      background: rgba(255, 255, 255, 1)
      margin-bottom: 0.267rem
      .choose-box
        display: flex
        align-items: center
        wh(100%, 1.28rem)
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
        &:last-child
          border-bottom: none
        .title
          margin-left: 0.32rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .pic1
          margin-left: auto
          margin-right: 0.32rem
          wh(0.32rem, 0.32rem)
        .name
          flex: 1
          text-align: right
          height: 0.6rem
          line-height: 0.6rem
          padding-right: 0.253rem
          size-color(0.427rem, #ccc)
        .company-text
          color: rgba(51, 51, 51, 1)
        .name >>> .vux-popup-picker-placeholder
          color: rgba(204, 204, 204, 1)
        .name >>> .vux-cell-value
          color: rgba(51, 51, 51, 1)
        .name >>> .weui-cell__ft .vux-cell-placeholder
          color: rgba(204, 204, 204, 1)
        .name >>> .weui-cell__ft .vux-cell-value
          color: rgba(51, 51, 51, 1)
    .content-box3
      display: flex
      align-items: center
      wh(100%, 1.28rem)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      background: rgba(255, 255, 255, 1)
      .title1
        margin-left: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .num-box
        display: flex
        flex: 1
        align-items: center
        height: 1.28rem
        .number
          flex: 1
          text-align: right
          padding-right: 0.1rem
          height: 0.6rem
          line-height: 0.6rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
      .title2
        margin-right: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
    .content-box4
      fj(center, center)
      margin-bottom: 0.267rem
      wh(100%, 1.28rem)
      background: #FFF
      .pic2
        wh(0.48rem, 0.48rem)
      .add
        margin-left: 0.267rem
        size-color(0.4rem, rgba(60, 175, 255, 1))

    .lend-money
      fj(space-between, center)
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      .money-title
        margin-left: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .other-money
        flex: 1
        text-align: right
        padding-right: 0.267rem
        size-color(0.427rem, rgba(60, 175, 255, 1))
      .pic1
        margin-left: auto
        margin-right: 0.32rem
        wh(0.32rem, 0.32rem)
      .money-box
        display: flex
        align-items: center
        flex: 1
        margin-right: 0.32rem
        height: 1.28rem
        .money
          flex: 1
          height: 0.6rem
          line-height: 0.6rem
          text-align: right
          size-color(0.427rem, rgba(60, 175, 255, 1))
    .source-box
      fj(space-between, center)
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      .source-title
        margin-left: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .source-con
        display: flex
        align-items: center
        flex: 1
        margin-right: 0.32rem
        height: 1.28rem
        .source
          flex: 1
          height: 0.6rem
          line-height: 0.6rem
          text-align: right
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .source >>> .vux-cell-primary .vux-popup-picker-placeholder
          color: #ccc
        .source >>> .vux-cell-value
          color: rgba(51, 51, 51, 1)
    .grant-box
      display: flex
      align-items: center
      wh(100%, 1.28rem)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      background: #FFF
      .title
        margin-left: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .pic1
        margin-left: auto
        margin-right: 0.32rem
        wh(0.32rem, 0.32rem)
      .name
        flex: 1
        text-align: right
        height: 0.6rem
        line-height: 0.6rem
        padding-right: 0.253rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .name >>> .vux-popup-picker-placeholder
        color: rgba(204, 204, 204, 1)
      .name >>> .vux-cell-value
        color: rgba(51, 51, 51, 1)
    .btn-box
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 1.28rem
      padding-top: 0.96rem
      padding-bottom: 0.64rem
      background: rgba(242, 242, 242, 1)
      .btn
        width: 90.4%
        height: 1.28rem
        line-height: 1.28rem
        background: rgba(60, 175, 255, 1)
        font-size: 0.453rem
        color: rgba(255, 255, 255, 1)
        font-weight: 500
        border-radius: 0.16rem
    .open-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 88
      fj(center, center)
      background-color: rgba(0, 0, 0, 0.5)
      .open-list
        position: fixed
        z-index: 99
        bottom: 0
        left: 0
        wh(100%, 6.44rem)
        background: #FFF
        overflow: auto
        .name
          fj(center, center)
          height: 1.28rem
          border-bottom: 1px solid #EEE
          cursor: pointer
          size-color(0.44rem, #666666)
          &:hover
            color: #3CAFFF
</style>
